// ==UserScript==
// @name           View Disney PhotoPass
// @namespace      www.disneyphotopass.com
// @description    View Disney Photopass Images
// @include        http://www.disneyphotopass.com/photoeditor.aspx?*
// ==/UserScript==

function _gel(id){ return document.getElementById(id); }

var ph;
// Get the image and change the cursor to a pointer and allow a click event
ph=_gel('greyedImg');
ph.style.cursor='pointer';
ph.addEventListener('click',viewImg,false);

function viewImg(){
  if(!ph) return;
  // The reason why most people can't get the picture is that the image is actually 
  // a background of a div cell inside multiple divs
  url=ph.style.background.toString();
  url=url.match(/\(.*\)/)[0];
  if(!url) return;
  // The largest picture you can get is 450 px
  url=url.replace("(","").replace(")","").replace("width=400","width=450");
  url="www.disneyphotopass.com"+url;
  
  // Up to this point, the image alone opens up in a new tab from where it can be saved
  GM_openInTab(url);
  
  // Unfortunately, that image can only be 450 pixels wide (or long, depending on orientation)
  // However, the image can be "cropped and zoomed" by changing values in the image url, creating
  // multiple smaller images that can be pasted together to form a new image. Keep in mind, the images
  // are still fairly low in resolution, but better than the one created above.
  
  // One way to do it is to create a table with the images aligned together and then copy the screen 
  // image and paste it into an image editing program. 
  
  // These numbers arise out of the 3/2 format of the original pictures
  //* <--- Add another slash before the asterisk to acctivate this second method
  var h=[0.5, 0.75];
  if(url.match('Portrait')) h=[0.75,0.5];
  
  // Change the url to the proper cropWidth and a square aspect ratio (makes the math easier)
  url="http://"+url.replace(/cropWidth=[0-9\.]*\&/,'cropWidth='+h[0]+'&').replace(/AspectRatio\=[x0-9]*\&/,'AspectRatio=4x4&');
  // Create the table with the images and put it in a div with hidden overflow
  str='<html><head><title>Photopass image</title></head><body><div style="width:'+(h[0]==0.5?'9':'6')+'00px; height:'+(h[0]==0.5?'6':'9')+'00px; overflow:hidden"><table cellspacing="0" cellpadding="0"><tr style="height:450px"><td>';
  str+='<img src="' + url.replace(/cropX=[0-9\.]*\&/,'cropX=0&').replace(/cropY=[0-9\.]*\&/,'cropY=0&') +'">';
  str+='<img src="' + url.replace(/cropX=[0-9\.]*\&/,'cropX='+h[0]+'&').replace(/cropY=[0-9\.]*\&/,'cropY=0&')+'">';
  str+='</td></tr><tr style="height:450px"><td>';
  str+='<img src="' + url.replace(/cropX=[0-9\.]*\&/,'cropX=0&').replace(/cropY=[0-9\.]*\&/,'cropY='+h[1]+'&')+'">';
  str+='<img src="' + url.replace(/cropX=[0-9\.]*\&/,'cropX='+h[0]+'&').replace(/cropY=[0-9\.]*\&/,'cropY='+h[1]+'&')+'">';
  str+='</td></tr></table><p></div>To save this image hit Alt-PrtScr and paste into your favorite image program. Crop to remove the black background and save as a jpg image.</p></body>';
  // Finaly use the data: uri to show the newly created "image" in a new tab. The image generated
  // will be 900x600 or 600x900. Copy the screen (Alt-PrtScrn) and paste it to a blank image of the
  // correct size.
  GM_openInTab("data:text/html;charset=UTF-8," + encodeURI(str));
  // Show the image in another tab. Just click save afterwards
  // --> */
}